import { defineStore } from 'pinia';
import { nextTick } from 'vue';
import { themeSettings } from '@/settings/index.js';
import cloneDeep from 'lodash-es/cloneDeep.js';

export const useAppStore = defineStore('app', {
  state() {
    return {
      header: cloneDeep(themeSettings.header),
      reloadFlag: true,
      reloadAppFlag: true,
      isLock: false,
      showAside: true,
      asideCollapsed: false,
      headerCollapsed: false,
      notificationPosition: 'top',
      lang: 'zh_CN',
    };
  },
  actions: {
    async reloadPage() {
      $loadingBar.start();
      this.reloadFlag = false;
      await nextTick();
      this.reloadFlag = true;
      setTimeout(() => {
        document.documentElement.scrollTo({ left: 0, top: 0 });
        $loadingBar.finish();
      }, 100);
    },
    async reloadApp() {
      this.reloadAppFlag = false;
      await nextTick();
      this.reloadAppFlag = true;
      setTimeout(() => {
        document.documentElement.scrollTo({ left: 0, top: 0 });
      }, 100);
    },
    switchAsideCollapsed(type) {
      this.asideCollapsed = !this.asideCollapsed;
    },
    switchShowAside(type) {
      this.showAside = type;
    },
    switchHeaderCollapsed() {
      if (this.header.height === 0) {
        this.header.height = themeSettings.header.height;
      } else {
        this.header.height = 0;
      }
    },
    setLockScreen(type) {
      this.isLock = type;
    },
    setLanguage(languageName) {
      this.lang = languageName;
    },
    setCollapsed(collapsed) {
      this.asideCollapsed = collapsed;
    },
    changeNotificationPosition(type) {
      this.notificationPosition = type;
    },
  },
  // 开启持久化
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'APP_STORE_CACHE',
        storage: localStorage,
        paths: ['asideCollapsed', 'headerCollapsed', 'isLock', 'header', 'lang'],
      },
    ],
  },
});
